<!--
 * @Author: ChunLai
 * @Date: 2023-07-27 10:26:44
 * @LastEditTime: 2025-11-19 13:58:12
 * @Description: 投保信息展示模块
 * @FilePath: \01.latest-short-insure\src\views\sign\components\InsureInfos.vue
-->
<template>
  <div>
    <div class="mode2 mt10">
      <div class="flex-lr mode2_top">
        <span class="tt_l">投保信息</span>
        <span class="tt_v" @click="showPop = true">
          查看详情<van-icon
            name="arrow"
            size="12"
            color="#747474"
            class="ml4"
          />
        </span>
      </div>
      <div class="li_cell">
        <div class="cell_label">
          <span>投保人</span>
        </div>
        <div class="cell_value">
          <div>
            {{
              `${applicant.name}，${getSexLabel(
                applicant.sex
              )}，${$GlobalFuns.userAge(applicant.birthDate)}岁`
            }}
          </div>
        </div>
      </div>
      <div class="li_cell">
        <div class="cell_label">
          <span>被保险人</span>
        </div>
        <div class="cell_value multi">
          <div
            class="li_item"
            v-for="(item, index) in assuredList"
            :key="`bbr_msg${index}`"
          >
            {{
              `${item.name}，${getSexLabel(
                item.sex
              )}，${$GlobalFuns.userAge(item.birthDate)}岁，${item.relationToAppntName}`
            }}
          </div>
        </div>
      </div>
      <div class="li_cell" v-if="payInfo.effectiveDate">
        <div class="cell_label">
          <span>起保日期</span>
        </div>
        <div class="cell_value">
          {{ payInfo.effectiveDate}} 0时
        </div>
      </div>
      <div class="li_cell" v-if="payInfo.expiryDate">
        <div class="cell_label">
          <span>终保日期</span>
        </div>
        <div class="cell_value">
          {{ payInfo.expiryDate }} 24时
        </div>
      </div>
      <div class="li_cell" v-if="unifyRenew == '1'">
        <div class="cell_label">
          <span>保单信息</span>
        </div>
        <div class="cell_value">
          {{ payInfo.renewFlag == "-1" ? "已开通续保" : "未开通续保" }}
        </div>
      </div>
    </div>
    <van-popup
      v-model="showPop"
      overlay-class="lay1_shark"
      round
      position="bottom"
      closeable
    >
      <div class="pop_tt">查看投保信息</div>
      <div class="pop_main_box">
        <UserInfos titleTxt="投保人" :msgObj="applicant" uType="tbr" />
        <UserInfos
          :msgObj="bbritem"
          uType="bbr"
          :titleTxt="`被保险人${assuredList.length > 1 ? `${idex + 1}` : ''}`"
          v-for="(bbritem, idex) in assuredList"
          :key="`bbr_obj${idex}`"
        />
        <BillInfos v-if="unifyRenew == '1' && payInfo.expayMode" />
      </div>
    </van-popup>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import UserInfos from "./infos/UserInfos";
import BillInfos from "./infos/BillInfos";

export default {
  name: "InsureInfos",
  data() {
    return {
      showPop: false,
    };
  },
  components: { UserInfos, BillInfos },
  computed: {
    ...mapGetters({
      unifyRenew: "page/unifyRenew",
      assuredList: "insert/assuredList",
      applicant: "insert/applicant",
      payInfo: "insert/payInfo",
    }),
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    getSexLabel(value) {
      let res = "男";
      if (value === "1") {
        res = "女";
      }
      return res;
    },
  },
};
</script>

<style lang="less" scoped>
.mode2 {
  padding: 0 12px 10px 12px;
  background-color: #ffffff;
  .mode2_top {
    height: 40px;
    .tt_l {
      font-size: 16px;
      font-weight: 600;
      color: #242424;
      font-family: MiSans;
    }
    .tt_v {
      font-weight: 400;
      color: rgba(52, 52, 52, 1);
    }
  }
}

.pop_main_box {
  height: 75vh;
  padding-bottom: 30px;
  overflow-y: auto;
  background: #f5f5f9;
}

.pop_tt {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #242424;
  font-weight: 600;
  font-size: 16px;
}
.cell_label {
  width: 90px;
  // flex-shrink: 0;
}
.cell_value {
  // flex-wrap: wrap;
  width: calc(100% - 100px);
}
</style>
